<template>
	<view class="container">
		<!-- 头部 -->
		<view class="top">
			<view class="left" @click="goBack">
				<image src="/static/img/black.png" mode="aspectFill" width="20px"></image>
			</view>
			<view class="center">订单列表</view>
		</view>

		<view style="height: 60px;"></view>

		<view class="box2">
			<view class="post">
				<input maxlength="140" v-model="orderNumber" placeholder="请输入订单号" class="uni-input-input" />
			</view>
			<view class="button" @click="queryOrder">立即查询</view>
		</view>
		<view class="font2">历史订单</view>
		
	<!-- 	<view class="box3">
			<view class="one">
				<view>订单号：JR-SQSUQYSRRVRWQSRUTYZX</view>
				<view style="color: rgb(235, 86, 72);">未支付</view>
			</view>
			<view class="two">
				<view class="tap">
					<text>测算项目</text>
					<view></view>
				</view>
				<view class="tap">
					<text>订单金额</text>
					<view style="color: rgb(235, 86, 72);">39.90元</view>
				</view>
				<view class="btn">
					<view class="lisyd h2">查看订单</view>
					<view class="lisyd h2" style="border: 1px solid rgb(235, 86, 72); color: rgb(235, 86, 72);">去付款
					</view>
				</view>
			</view>
		</view>
		 -->
		<view class="box3" v-for="(item,index) in orderList" :key="item.orderNumber">
			<view class="one">
				<view>订单号：{{item.orderNumber}}</view>
				<view style="color: rgb(235, 86, 72);">未支付</view>
			</view>
			<view class="two">
				<view class="tap">
					<text>测算项目</text>
					<view></view>
				</view>
				<view class="tap">
					<text>订单金额</text>
					<view style="color: rgb(235, 86, 72);">{{item.price}}元</view>
				</view>
				<view class="btn">
					<view class="lisyd h2" @click="toShop(item)">查看订单</view>
					<view class="lisyd h2" style="border: 1px solid rgb(235, 86, 72); color: rgb(235, 86, 72);" @click="toShop(item)">去付款</view>
				</view>
			</view>
		</view>
		<view class="liuio">没有更多了</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderNumber: '',
				orderList: [{
						orderNumber: 'JR-SQSUQYSRRVRWQSRUTYZX',
						name: "",
						price: '39.9',
						status: 0,
						ispay: 0
					},
					{
						orderNumber: 'JR-SQSURQRQRWRTQYRUXZWU',
						name: "",
						price: '39.9',
						status: 0,
						ispay: 0
					}

				]
			};
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			queryOrder() {
				if (this.orderNumber) {
					uni.showToast({
						title: '查询订单: ' + this.orderNumber,
						icon: 'none'
					});
				} else {
					uni.showToast({
						title: '请先输入订单号',
						icon: 'none'
					});
				}
			},
		 toShop(ordeInfo){
			 uni.setStorageSync("ordeInfo",JSON.stringify(ordeInfo))
			 uni.navigateTo({
			 	url:"/pages/shop/shop"
			 })
		 }
		}
	}
</script>

<style scoped>
	page {
		background: #f7f7f7;
	}


	.top {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		height: 45px;
		line-height: 45px;
		text-align: center;
		display: flex;
		padding: 5px;
		background: #202045;
		background: rgb(248, 248, 248);
	}

	.left {
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		height: 45px;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}

	.left image {
		width: 20px;
		height: 20px;
	}

	.top .center {
		width: 100%;
		margin-left: 50px;
	}

	.box2 {
		background: #fff;
		margin: 25px 10px 20px;
		border-radius: 12px;
	}

	.post {
		padding-top: 15px;
	}

	.post input {
		margin: 20px 20px;
		text-align: center;
		height: 50px;
		background: #f5f5f5;
		border-radius: 40px;
		width: 90%;
	}

	input {
		display: block;
		font-size: 16px;
		line-height: 1.4em;
		height: 1.4em;
		min-height: 1.4em;
		border: 0;
	}

	.button {
		display: inline-block;
		border-radius: 40px;
		width: 90%;
		height: 50px;
		text-align: center;
		font-size: 17px;
		line-height: 50px;
		margin: 0px 5% 20px;
		background-image: linear-gradient(90deg, #4f609c, #6e7fbd);
		color: #fff;
	}

	.font2 {
		font-size: 17px;
		width: 85%;
		font-weight: 700;
		margin: auto;
		margin-bottom: 20px;
	}

	.box3 {
		font-size: 15px;
	}

	.box3 .one {
		background: #fff;
		margin: 20px 10px;
		border-radius: 20px 20px 0 0;
		display: flex;
		justify-content: space-around;
		padding: 15px 0 15px 0;
	}

	.box3 .two {
		background: #fff;
		margin: -18px 10px 20px;
		border-radius: 0 0 20px 20px;
		padding: 10px 10px;
	}

	.box3 .two text {
		margin: 0 25px 10px 7px;
		color: #c8c8c8;
	}

	.box3 .two .tap {
		display: flex;
		margin-bottom: 10px;
	}

	.lisyd {
		width: 80px;
		height: 30px;
		background: #fff;
		text-align: center;
		line-height: 30px;
		font-size: 14px;
		border-radius: 15px;
		color: #5e6fac;
		border: 1px solid #495a95;
		margin-left: 10px;
	}

	.box3 .btn {
		display: flex;
		justify-content: flex-end;
	}

	.liuio {
		text-align: center;
		font-size: 13px;
		color: #999;
		padding-bottom: 25px;
	}
</style>